@mixin flex-align-center {
  display: flex;
  align-items: center;
}

@mixin flex-justify-center {
  display: flex;
  justify-content: center;
}

@mixin radius-s {
  border-radius: var(--radius-s);
}

@mixin radius-m {
  border-radius: var(--radius-m);
}

@mixin radius-l {
  border-radius: var(--radius-l);
}

@mixin radius-xl {
  border-radius: var(--radius-xl);
}

@mixin remove-line-height {
  line-height: 1;
}

@mixin svg-mask($path, $viewbox: "0 0 100 100") {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="#{$viewbox}">#{$path}</svg>');
}

@mixin vertical-scroll-shadow($bg, $strength: 0.15, $height: 4px) {
  background: 
    linear-gradient($bg 33%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 25% 0, rgba(0,0,0, $strength), rgba(0,0,0,0));
  background-color: $bg;
  background-size: 100% 24px, 200% $height;

  background-repeat: no-repeat;
  background-attachment: local, scroll;
}
